import React, { Component } from 'react'

export default class State extends Component {
  // 定义组件内部状态
/*   constructor() {
    super()
    this.state = {
        count:100
      }
  }   第一种写法 在constructor里写  */

  /* 第二种写法  直接在类里定义数组据*/
  state = {
    count :200
  }

    // 在react类组件中想要让视图进行更新，必须重新执行render函数

  render() {
    const { count } = this.state
    console.log("render执行了");
    return (
      <div>State
         { count }

        <button onClick={() => {
          // console.log('点尽快');
          
          /* this.state.count += 1;
          // 此时count已经更新但是视图未更新，需要重新执行 render函数
         console.log(this.state.count); */
        // 解决办法  this.setState({},{})两个参数
        this.setState({
          count:500
        }, () => {
          console.log('前面执行后我才执行');
          console.log(this.state.count+'修改后要立即用，修改过的数据写在这'); 
        })
        console.log(this.state.count+'异步 我没变'); 
        }}> 点尽快</button>
      </div>
    )
  }
}
